<template>
	<!-- 头部导航 -->
	<view class="head">
		<view class="back" @click="goBack">
			<image src="@/static/public/arrow_left_000000.png" class="img1"></image>
		</view>
		<view class="title">我的粉丝</view>
		<view class="placeholder"></view>
	</view>
	<!-- 搜索 -->
	<view class="Search">
		<up-search v-model="page.name" shape="round" @change='search'></up-search>
	</view>

	<!-- 列表 -->
	<view class="list" v-for="(item,index) in list" :key="index">
		<view class="TX">
			<image :src="fileUrl+item.avatar" mode="aspectFit"></image>
		</view>
		<view class="nameAndZH">
			<view class="">
				<p>{{item.name}}</p>
				<p class="fs">{{item.intro}}</p>
			</view>
		</view>
		<view class="AU">
			<view v-if="item.isMutual == 1">
				互相关注
			</view>
			<view v-else style="background-color: #EEFFD8;border: 2rpx solid #8FE21B;">
				+关注
			</view>
		</view>
	</view>
	<up-loadmore :loadmoreText="list.length<total?'正在加载':'没有更多了'" dashed line />

</template>

<script setup>
	import { ref } from 'vue';
	import api from '@/utlis/api.js';
	import { onShow, onReachBottom } from '@dcloudio/uni-app';
	import { fileUrl, userInfo } from '@/utlis/config';
	const page = ref({
		"pageSize": '20',
		"pageNum": '1',
		'name': ''
	})


	const total = ref(0);

	onShow(() => {
		getFanList()
	});
	const list = ref([]);
	const getFanList = () => {
		api("app/user/userBase/me/fans", "GET", page.value).then(res => {
			total.value = res.total;
			if (page.value.pageNum <= 1) {
				list.value = [];
			}
			list.value.push(...res.rows);
			page.value.pageNum++;
		});
	}



	onReachBottom(() => {
		getFanList()
	})

	const search = () => {
		console.log(111)
		page.value.pageNum = 1;
		getFanList();
	}

	const goBack = () => {
		uni.navigateBack({
			delta: 1
		});
	}
</script>

<style lang="scss">
	.head {
		display: flex;
		flex-wrap: wrap;
		padding: 85rpx 30rpx 20rpx 30rpx;
		box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);

		.back,
		.placeholder {
			width: 100rpx;

			image {
				height: 35rpx;
			}
		}

		.title {
			width: 490rpx;
			text-align: center;
		}

		.img1 {
			width: 10px;
			height: 16px;
		}
	}

	.Search {
		padding: 20rpx;
	}

	.list {


		display: flex;
		flex-wrap: wrap;

		width: 95%;
		margin: 0 auto;

		view {
			margin: 13rpx 0;
			height: 99rpx;
		}

		.TX {
			margin: 10rpx 20rpx 10rpx 17rpx;

			image {
				width: 99rpx;
				height: 99rpx;
				border-radius: 49rpx;
			}
		}

		.nameAndZH {
			width: 56%;

			>view {
				.fs {
					font-size: 11px;
					margin: 5rpx 0;
					color: rgba(149, 145, 145, 1);
				}
			}
		}

		.AU {
			>view {
				height: 61rpx;
				width: 134rpx;
				border-radius: 53rpx;
				border: 1px #D8D8D8 solid;
				font-size: 13px;
				color: #b0b0b0;
				margin: 17rpx 17rpx;
				text-align: center;
				line-height: 61rpx;

			}
		}
	}
</style>